<template>
    <div class="mod-config">
        <div>
            <el-select v-model="value" placeholder="请选择" style="margin-right: 20px" @change="handleChange">
                <el-option-group
                        v-for="group in options"
                        :key="group.label"
                        :label="group.label">
                    <el-option
                            v-for="item in group.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-option-group>
            </el-select>
            <el-form :inline="true" style="float:right">
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" circle></el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchName" placeholder="搜索用户姓名例如:李华" size="medium" class="input"
                              clearable="clearable"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-divider></el-divider>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="dataListLoading">
                <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
                    <template #default="scope">
                        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="avater" label="证件照" width="150">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.avater"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="用户姓名" width="150"></el-table-column>
                <el-table-column prop="birthday" label="生日" width="230" align="center"></el-table-column>
                <el-table-column prop="sex.name" label="性别" width="120" align="center"></el-table-column>
                <el-table-column prop="idCard" label="身份证号" width="280" align="center"></el-table-column>
                <el-table-column prop="ethnic.name" label="民族" width="120" align="center"></el-table-column>
                <el-table-column prop="degree.name" label="学历" width="120" align="center"></el-table-column>
                <el-table-column prop="graduate" label="毕业院校" width="280" align="center"></el-table-column>
                <el-table-column prop="identity.name" label="身份背景" width="120" align="center"></el-table-column>
                <el-table-column prop="domicile.name" label="户籍地" width="120" align="center"></el-table-column>
                <el-table-column prop="address" label="家庭住址" width="380" align="center"></el-table-column>
                <el-table-column prop="organization.name" label="组织" width="200" align="center"></el-table-column>
                <el-table-column prop="job.name" label="岗位" width="200" align="center"></el-table-column>
                <el-table-column prop="account" label="账号(手机号)" width="200" align="center"></el-table-column>
                <el-table-column prop="email" label="电子邮件" width="230" align="center"></el-table-column>
                <el-table-column prop="vx" label="微信" width="230" align="center"></el-table-column>
                <el-table-column prop="contact" label="联系方式" width="250" align="center"></el-table-column>
                <el-table-column prop="createTime" label="登记日期" width="230" align="center"></el-table-column>
                <el-table-column prop="modifiedTime" label="修改日期" width="230" align="center"></el-table-column>
                <el-table-column prop="outTime" label="离职日期" width="230" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-thumb" type="primary" @click="assignUser(scope.row.id)">
                            增 派
                        </el-button>
                        <el-button size="small" icon="el-icon-turn-off" type="danger" @click="cancleThisAssignUser(scope.row.id)">
                            取 派
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                align="left"
                @current-change="changePage"
                background
                layout="total, prev, pager, next"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total">
            </el-pagination>
            <!--  指派用户      -->
            <el-dialog title="指派用户" :visible.sync="editFormVisibleForAssign" :show-close="isClose"
                       :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-select v-model="adminValue" placeholder="请选择组织" style="margin-right: 20px">
                    <el-option-group
                        v-for="group in adminOptions"
                        :key="group.label"
                        :label="group.label">
                        <el-option
                            v-for="item in group.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-option-group>
                </el-select>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancleAssign()">取 消</el-button>
                    <el-button type="primary" @click="handleAssign()">确 定</el-button>
                </div>
            </el-dialog>
            <!--  取消用户指派      -->
            <el-dialog title="取消指派" :visible.sync="editFormVisibleForCancleAssign" :show-close="isClose"
                       :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-select v-model="cancleAdminValue" placeholder="请选择组织" style="margin-right: 20px">
                    <el-option
                        v-for="item in cancleAdminOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancleThisAssign()">取 消</el-button>
                    <el-button type="primary" @click="handleThisAssign()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            // 当前页
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            // 一共多少页
            pageSize: 10,
            // 一共多少条
            total: 10,
            // 加载
            dataListLoading: false,
            //表格数据
            tableData: [],
            //下拉框数据
            options: [],
            // 下拉框选中值
            value: '',
            //搜索的字典名称
            searchName: '',
            //当前组织
            curOrganization: '',
            //是否可显示关闭
            isClose: false,
            //指派的用户id
            assignId:'',
            //弹窗
            editFormVisibleForAssign:false,
            //可选择的指派选项
            adminOptions:[],
            //选择的指派id
            adminValue:'',
            //取消指派弹窗
            editFormVisibleForCancleAssign:false,
            //取消指派的id
            cancleAdminValue:'',
            //取消指派的选择
            cancleAdminOptions:[],
        }
    },
    mounted() {
        this.loadOptions();
    },
    methods: {
        dayjs,
        // 取消指派
        handleThisAssign() {
            this.$confirm('确定取消该用户的指派吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http('/admin/cancleAssign', 'POST', {
                    id: this.cancleAssignId,
                    organizationId: this.cancleAdminValue
                }, (resp) => {
                    let data = resp.data;
                    if (data.code === 20000) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        this.cancleThisAssign();
                        this.loadAdminData();
                    }else {
                        this.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        cancleThisAssignUser(id){
            this.editFormVisibleForCancleAssign = true;
            this.cancleAssignId = id;
            this.$http('/admin/getAdminOrganizations', 'POST', {
                id: id
            }, (resp) => {
                let data = resp.data;
                if (data.code === 20000) {
                    let list = data.organizations;
                    if (list.length > 0) {
                        for (let i = 0; i < list.length; i++) {
                            let item = list[i];
                            this.cancleAdminOptions.push({
                                value: item.organizationId,
                                label: item.organization.name
                            })
                        }
                    }

                } else {
                    this.$message({
                        message: resp.data.msg,
                        type: 'error'
                    });
                }
            })

        },
        // 取消取消指派
        cancleThisAssign() {
            this.cancleAssignId = 0;
            this.cancleAdminValue = '';
            this.cancleAdminOptions = [];
            this.editFormVisibleForCancleAssign = false;
        },
        assignUser(id) {
            this.assignId = id;
            this.editFormVisibleForAssign = true;
            let that = this;
            that.$http('/admin/groupOrganization', 'POST', {
                id: id
            }, (resp) => {
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    if (data.length > 0) {
                        for (let i = 0; i < data.length; i++) {
                            let children = [];
                            if (data[i].options.length > 0) {
                                for (let j = 0; j < data[i].options.length; j++) {
                                    children.push({
                                        value: data[i].options[j].id,
                                        label: data[i].options[j].name
                                    })
                                }
                            }
                            that.adminOptions.push({
                                label: data[i].label + "直属部门",
                                options: children
                            })
                        }
                    }
                }
            })
        },
        // 取消指派
        cancleAssign() {
            this.adminValue = '';
            this.adminOptions = [];
            this.editFormVisibleForAssign = false;
        },
        handleAssign() {
            let that = this;
            that.$confirm('确定选择该组织指派为该用户吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/admin/assign', 'POST', {
                    id: that.assignId,
                    organizationId: that.adminValue
                }, (resp) => {
                    let data = resp.data;
                    if (data.code === 20000) {
                        that.$message({
                            type: 'success',
                            message: '指派成功!'
                        });
                        that.editFormVisibleForAssign = false;
                        this.cancleAssign();
                        this.loadAdminData();
                    }
                })
            }).catch(() => {

            })
        },
        //加载管理者数据
        loadAdminData(){
            this.dataListLoading = true;
            let that = this;
            that.$http('/admin/organizations','POST',{
                page:this.currentPage,
                organizationId:this.value
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    that.tableData = data.data.list;
                    console.log(this.tableData.length)
                    if(data.data.list.length<=0){
                        this.currentPage = 1;
                        this.reLoadAdminData();
                    }else {
                        let message = '暂无'
                        for(let e of data.data.list){
                            this.userInfo(e,message);
                        }
                    }
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
                this.dataListLoading = false;
            });
        },
        reLoadAdminData(){
            let that = this;
            that.$http('/admin/organizations','POST',{
                page:this.currentPage,
                organizationId:this.value
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    that.tableData = data.data.list;
                    if(data.data.list.length<=0){
                        this.currentPage = 1;
                    }else {
                        let message = '暂无'
                        for(let e of data.data.list){
                            this.userInfo(e,message);
                        }
                    }
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
                this.dataListLoading = false;
            });
        },
        //加载组织数据
        loadOptions(){
            let that = this;
            that.$http('/organization/groupOrganization','POST',null,(resp)=>{
                if(resp.data.code === 20000){
                    let data = resp.data.data;
                    if (data.length>0){
                        for (let i = 0; i < data.length; i++) {
                            let children = [];
                            if (data[i].options.length>0){
                                for (let j = 0; j < data[i].options.length; j++) {
                                    children.push({
                                        value: data[i].options[j].id,
                                        label: data[i].options[j].name
                                    })
                                }
                            }
                            that.options.push({
                                label: data[i].label+"直属",
                                options: children
                            })
                        }
                    }
                }
                this.value = this.options[0].options[0].value;
                this.loadAdminData()
            })
        },
        //处理选择变化
        handleChange(){
            this.loadAdminData()
        },
        // 切换分页
        changePage(page) {
            this.currentPage = page;
            this.loadAdminData();
        },
        userInfo(e,message) {
            if (e.avater === null || e.avater === '') {
                if (e.sex === null) {
                    e.avater = require('@/assets/avater-default.jpg');
                } else {
                    if (e.sex.name === '男') {
                        e.avater = require('@/assets/avater_man.png');
                    } else if (e.sex.name === '女') {
                        e.avater = require('@/assets/avater_woman.png');
                    } else {
                        e.avater = require('@/assets/avater-default.jpg');
                    }
                }
            }
            if (e.name === null || e.name === '') {
                e.name = message;
            }
            if (e.birthday === null) {
                e.birthday = message;
            } else {
                e.birthday = dayjs(e.birthday).format('YYYY-MM-DD HH:mm:ss');
            }
            if (e.sex === null || e.sex === '') {
                e.sex = {name: message};
            }
            if (e.idCard === null || e.idCard === '') {
                e.idCard = message;
            }
            if (e.ethnic === null || e.ethnic === '') {
                e.ethnic = {name: message};
            }
            if (e.degree === null || e.degree === '') {
                e.degree = {name: message};
            }
            if (e.graduate === null || e.graduate === '') {
                e.graduate = message;
            }
            if (e.identity === null || e.identity === '') {
                e.identity = {name: message};
            }
            if (e.domicile === null || e.domicile === '') {
                e.domicile = {name: message};
            }
            if (e.address === null || e.address === '') {
                e.address = message;
            }
            if (e.organization === null || e.organization === '') {
                e.organization = {name: message};
            }
            if (e.job === null || e.job === '') {
                e.job = {name: message};
            }
            if (e.account === null || e.account === '') {
                e.account = message;
            }
            if (e.email === null || e.email === '') {
                e.email = message;
            }
            if (e.vx === null || e.vx === '') {
                e.vx = message;
            }
            if (e.contact === null || e.contact === '') {
                e.contact = message;
            }
            if (e.createTime === null) {
                e.createTime = message;
            } else {
                e.createTime = dayjs(e.createTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if (e.modifiedTime === null) {
                e.modifiedTime = message;
            } else {
                e.modifiedTime = dayjs(e.modifiedTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if (e.outTime === null) {
                e.outTime = message;
            } else {
                e.outTime = dayjs(e.outTime).format('YYYY-MM-DD HH:mm:ss');
            }
        }
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
</style>